<template>
  <div class="">
    <div class="mask" @click="close" />
    <div class="paymodal codemodal">
      <div class="modal_head">
        <span class="fl">收银台</span>
        <a href="javascript:" class="close iconfont" @click="close">&#xe616;</a>
      </div>
      <div v-if="payStep === 2" class="modal_body payrun h180">
        <div class="icon iconfont c_green minIcon">&#xe69f;<span class="c_333">订单支付成功</span></div>
        <div class="center mgt20">
          <a :href="'/course/'+data.courseId" class="solid_btn">立即学习</a>
        </div>
      </div>
      <div v-else-if="payStep === 3" class="modal_body payrun">
        <div class="icon iconfont c_red">&#xe68c;</div>
        <div class="tip">支付失败</div>
        <div class="center">
          <button class="solid_btn" @click="resetPay">重新支付</button>
        </div>
      </div>
      <div v-else class="modal_body">
        <div class="pay_type">
          <input id="payType2" v-model="payType" type="radio" name="payType" value="2">
          <label for="payType2" class="pay pay_ali" @click="changePay(2)" />
          <input id="payType1" v-model="payType" type="radio" name="payType" value="1">
          <label for="payType1" class="pay pay_weixin" @click="changePay(1)" />
        </div>
        <div v-if="payType === 2" class="tip">支付宝支付 {{ data.coursePrice }}元</div>
        <div v-else class="tip">微信支付 {{ data.coursePrice }}元</div>
        <div class="code">
          <canvas id="canvas" />
          <div v-if="load" class="create_tip">正在生成...</div>
        </div>
        <p v-if="payType === 2" class="tip2">请使用支付宝扫描<br> 二维码以完成订单</p>
        <p v-else class="tip2">请使用微信扫描<br> 二维码以完成订单</p>
      </div>
    </div>
  </div>
</template>
<script>
import { continuePay } from '~/api/user.js'
import { orderInfoView } from '~/api/course.js'
import QRCode from 'qrcode'

export default {
  props: {
    data: {
      type: Object,
      default: null
    }
  },
  data() {
    return {
      payStep: 1,
      payType: 1,
      load: true
    }
  },
  mounted() {
    this.payType = parseInt(this.data.payType)
    this.getOrder(this.data.payType)
  },
  methods: {
    reload() {
      window.location.reload()
    },
    close(event) {
      this.$emit('hidefun', event)
    },
    getOrder(pt) {
      this.load = true
      continuePay({
        orderNo: this.data.orderNo,
        payType: pt
      }).then(res => {
        this.payType = res.payType
        this.qrcode(res.payMessage)
        this.getOrderInfo(res.orderNo)
      }).catch(msg => {
        console.error('系统繁忙')
      })
    },
    resetPay() {
      this.payStep = 1
      this.getOrder(this.payType)
    },
    qrcode(url) {
      const that = this
      QRCode.toCanvas(document.getElementById('canvas'), url, {
        width: 178,
        height: 178
      }, function(error) {
        if (error) console.error(error)
        that.load = false
      })
    },
    changePay(int) {
      this.getOrder(int)
    },
    getOrderInfo(no) {
      const that = this
      orderInfoView(no).then(res => {
        if (res.orderStatus === 1) {
          setTimeout(function() {
            that.getOrderInfo(no)
          }, 1000)
        } else if (res.orderStatus === 2) {
          that.payStep = 2
        } else {
          that.payStep = 3
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.h180 {
  max-height: 370px;
  min-height: 180px;
}

.paymodal {
  position: fixed;
  left: 50%;
  top: 10%;
  z-index: 999;
  width: 480px;
  margin-left: -240px;
  background-color: #fff;
  border-radius: 8px;
  overflow: hidden;

  .modal_head {
    line-height: 46px;
    background-color: #f9f9f9;
    text-align: right;
    padding: 0 20px;

    .close {
      font-size: 14px;
    }
  }

  .code {
    position: relative;

    .create_tip {
      position: absolute;
      top: 50%;
      left: 0;
      right: 0;
      line-height: 30px;
      background-color: rgba(255, 255, 255, .7);
      text-align: center;
    }
  }

  .modal_foot {
    border-top: 1px solid #e7e7eb;
    padding: 20px;
    text-align: center;
  }

  .table {
    width: 100%;
  }

  th {
    line-height: 36px;
    background-color: #f8f8f8;
  }

  td {
    vertical-align: middle;
    padding: 20px;
  }

  .name {
    width: 140px;
    padding-left: 12px;
    font-size: 16px;
  }

  .img {
    display: inline-block;
    width: 120px;
    padding: 0;
  }

  .name {
    display: inline-block;
    vertical-align: top;
  }

  .tabs {
    height: 48px;

    .tab {
      float: left;
      line-height: 46px;
      text-align: center;
      font-size: 16px;
      width: 50%;
    }

    span {
      cursor: default;
      display: inline-block;
      line-height: 46px;
    }

    .on {
      color: #ee7e00;

      span {
        border-bottom: 2px solid #ee7e00;
      }
    }
  }

  .remark {
    padding: 20px;
    overflow: hidden;
    font-size: 14px;
    border-top: 1px solid #f1f1f1;

    input {
      text-indent: .5em;
      height: 22px;
      width: 350px;
      border: none;
    }
  }

  .pay_type {
    padding: 12px 20px;
    overflow: hidden;
    border-bottom: 1px solid #f1f1f1;

    input {
      display: none;

      &:checked + .pay {
        border-color: #ec7f00;
      }
    }
  }

  .pay {
    width: 218px;
    height: 50px;
    border: 1px solid #fff;
    float: left;
    background-repeat: no-repeat;
    background-position: center center;

    &.pay_ali {
      background-image: url();
    }

    &.pay_weixin {
      background-image: url();
    }
  }
}

.codemodal {
  .tip {
    margin: 20px auto 0;
    text-align: center;
    font-size: 16px;
  }

  .code {
    width: 180px;
    height: 180px;
    border: 1px solid #ddd;
    margin: 20px auto;
  }

  .tip2 {
    margin: 0 auto;
    width: 200px;
    padding: 13px 0 13px 70px;
    height: 60px;
    margin-bottom: 20px;
    line-height: 20px;
    font-size: 14px;
    color: #fff;
    background: url() no-repeat 20px center #445f85;
  }

  .tip_panel {
    margin-top: 20px;
    padding: 20px;
    line-height: 20px;
    border-top: 1px solid #f1f1f1;
  }
}

.payrun {
  .icon {
    font-size: 80px;
    width: 80px;
    margin: 30px auto 0;
    text-align: center;

    &.minIcon {
      font-size: 26px;
      width: 160px;

      span {
        position: relative;
        top: -5px;
        font-size: 14px;
        padding-left: 6px;
      }
    }
  }

  .tip {
    font-size: 16px;
    text-align: center;
    padding-bottom: 20px;
  }

  .c_green {
    color: #05d005;
  }

  .ewm_img {
    width: 130px;
    display: block;
    margin: 20px auto 0;
    text-align: center;

    img {
      width: 130px;
      height: 130px;
    }

    p {
      line-height: 20px;
    }
  }
}
</style>
